<template>
  <page-header-wrapper :title="false">
    <a-card>
      <a-row :gutter="20">
        <a-col :span="3">
          <a-card
            bordered
            hoverable
            @click="onTopReceive('1')"
          >
            <a-statistic
              title="今日领取"
              :value="receiveNum.todayZlx"
              :value-style="{ color: '#3f8600' }"
              style="margin-right: 50px"
            >
            </a-statistic>
          </a-card>
        </a-col>
        <a-col :span="3">
          <a-card
            bordered
            hoverable
            @click="onTopReceive('2')"
          >
            <a-statistic
              title="昨日领取"
              :value="receiveNum.yesterdayZlx"
              :value-style="{ color: '#3f8600' }"
              style="margin-right: 50px"
            >
            </a-statistic>
          </a-card>
        </a-col>
        <a-col :span="3">
          <a-card
            bordered
            hoverable
            @click="onTopReceive('3')"
          >
            <a-statistic
              title="当月领取"
              :value="receiveNum.thisMonthZlx"
              :value-style="{ color: '#3f8600' }"
              style="margin-right: 50px"
            >
            </a-statistic>
          </a-card>
        </a-col>
        <a-col :span="3">
          <a-card
            bordered
            hoverable
            @click="onTopReceive('4')"
          >
            <a-statistic
              title="上月领取"
              :value="receiveNum.lastMonthZlx"
              :value-style="{ color: '#3f8600' }"
              style="margin-right: 50px"
            >
            </a-statistic>
          </a-card>
        </a-col>
      </a-row>
      <a-divider />
      <div class="table-page-search-wrapper">
        <a-form-model :model="queryParam" layout="inline">
          <a-row :gutter="48">
            <a-col :md="6" :sm="24">
              <a-form-item label="领取时间">
                <a-range-picker v-model="queryParam['filter[received_at]']" style="width: 100%" @change="onChangeReceive" />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="入库时间">
                <a-range-picker v-model="queryParam['filter[created_at]']" style="width: 100%" @change="onChangeCreated" />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="业务分类">
                <a-select
                  show-search
                  :filter-option="filterOption"
                  v-model="queryParam['filter[first_type]']"
                  placeholder="选择业务分类"
                >
                  <a-select-option v-for="(item,index) in typeOpts" :key="index" :value="index">{{ item }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-model-item label="数据来源">
                <a-select
                  show-search
                  :filter-option="filterOption"
                  v-model="queryParam['filter[source]']"
                  placeholder="选择数据来源"
                >
                  <a-select-option v-for="(item,index) in sourceOpts" :key="index" :value="index">{{ item }}</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <template v-if="advanced">
              <a-col :md="6" :sm="24">
                <a-form-item label="所属顾问">
                  <a-select
                    show-search
                    :filter-option="filterOption"
                    v-model="queryParam['filter[adviser_uid]']"
                    placeholder="选择所属顾问"
                  >
                    <a-select-option v-for="(item,index) in adviserOpts" :key="index" :value="index">{{ item }}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-item label="所属组长">
                  <a-select
                    show-search
                    :filter-option="filterOption"
                    v-model="queryParam['filter[leader_uid]']"
                    placeholder="选择所属组长"
                  >
                    <a-select-option v-for="(item,index) in leaderOpts" :key="index" :value="index">{{ item }}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <span class="table-page-search-submitButtons">
                  <a-button type="primary" @click="startSearch">点击查询</a-button>
                  <a-button style="margin-left: 8px" @click="reset">重置查询条件</a-button>
                </span>
              </a-col>
            </template>
          </a-row>
        </a-form-model>
      </div>
      <a-divider />
      <div class="table-operator">
        <s-table
          bordered
          ref="table"
          size="middle"
          :custom-row="onRowClick"
          :row-key="(record) => record.uid"
          :columns="receiveColumns"
          :data="receiveData"
        >
          <template slot="receive_num" slot-scope="text,record">
            <a-tag color="red" @click="onReceive(record.uid)">{{text}}</a-tag>
          </template>
        </s-table>
      </div>
    </a-card>
    <m-receive v-if="lxModal" :is-type="typeParam" @cancel="onCancel1"></m-receive>
    <m-cust v-if="receiveVisible" :receive-type="receiveType" @cancel="onCancel2"></m-cust>
  </page-header-wrapper>
</template>

<script>
  // 97
  import { STable } from '@/components'
  import memberColumns from '@/columns/member'
  import { getReceiveData, getReceiveOpts, receiveSearch } from '@/api/member'
  import MReceive from '@/views/member/components/MReceive'
  import MCust from '@/views/member/components/MCust'

  export default {
    components: {
      MCust,
      MReceive,
      STable
    },
    name: 'MemberReceive',
    data () {
      return {
        advanced: true,
        visible: false,
        receiveColumns: memberColumns.receive,
        receiveData: parameters => {
          return receiveSearch(Object.assign(parameters, this.queryParam)).then(res => {
            return res.result
          })
        },
        queryParam: {},
        adviserOpts: {},
        sourceOpts: {},
        leaderOpts: {},
        typeOpts: {},
        receiveNum: {},
        receiveVisible: false,
        receiveType: {},
        lxModal: false,
        typeParam: {},
        selectedRowKeys: []
      }
    },
    created () {
      this.getData()
    },
    methods: {
      getData () {
        getReceiveOpts().then(res => {
          this.adviserOpts = res.result.adviser_opts
          this.sourceOpts = res.result.source_opts
          this.leaderOpts = res.result.leader_opts
          this.typeOpts = res.result.type_opts
        })
        getReceiveData().then(res => {
          if (res.status === 0) {
            this.receiveNum = res.result
          }
        })
      },
      onCancel () {
        this.receiveVisible = false
      },
      filterOption (input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        )
      },
      onChangeReceive (date, dateString) {
        this.queryParam['filter[begin_received_at]'] = dateString[0]
        this.queryParam['filter[end_received_at]'] = dateString[1]
      },
      onChangeCreated (date, dateString) {
        this.queryParam['filter[begin_created_at]'] = dateString[0]
        this.queryParam['filter[end_created_at]'] = dateString[1]
      },
      toggleAdvanced () {
        this.advanced = !this.advanced
      },
      startSearch () {
        this.$refs.table.refresh(true)
      },
      reset () {
        this.queryParam = {}
        this.$refs.table.refresh(true)
      },
      onReceive (id) {
        const data = {}
        data['filter[adviser_uid]'] = id
        this.receiveType = Object.assign(data, this.queryParam)
        this.receiveVisible = true
      },
      onRowClick (record, index) {
        return {
          on: {
            click: () => {
            },
            dblclick: () => {
              this.$router.push({ name: 'MemberDetail', params: { id: record.uid } })
            }
          }
        }
      },
      onTopReceive (type) {
        this.typeParam = type
        this.lxModal = true
      },
      onCancel1 (visible) {
        this.lxModal = visible
      },
      onCancel2 (visible) {
        this.receiveVisible = visible
      }
    }
  }
</script>

<style scoped>

</style>
